/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { Component } from 'react';
import type { PropsWithChildren } from 'react';
import {
  Dimensions,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import rnTextSize, { TSFontSpecs } from 'react-native-text-size'

type Props = {}
type State = { width: number, height: number }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs: TSFontSpecs = {
  // fontFamily: undefined,
  fontFamily: 'San Francisco',
  // fontFamily: 'Roboto',
  fontSize: 24,
  fontStyle: 'italic',
  fontWeight: 'bold',
}
const text = 'I ❤️ rnTextSize'

class TestSizeDemo extends Component<Props, State> {
  state = {
    width: 300,
    height: 100,
  }

  async componentDidMount() {
    const width = Dimensions.get('window').width * 0.8
    const size = await rnTextSize.measure({
      text,             // text to measure, can include symbols
      width,            // max-width of the "virtual" container
      ...fontSpecs,     // RN font specification
    })
    this.setState({
      width: size.width,
      height: size.height
    })
  }

  // The result is reversible
  render() {
    const { width, height } = this.state
    return (
      <View style={{
        marginTop: 50,
        paddingHorizontal: 24,
      }}>
        {/* <View style={{
          height: 100, backgroundColor: "red", width: 100, borderRadius: "10%"
        }}> 
        </View>*/}
        <View style={{
          height: 100, backgroundColor: "green", width: 100, borderRadius: 50
        }}>
        </View>

        <Text style={{ width, height, ...fontSpecs }}>
          {text}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default TestSizeDemo;
